说明

本文转自菜鸟教程。

什么是JQuery

JQuery是一个JavaScript函数库，其包含以下功能：

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效与动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilities

JQuery安装

可以通过多种方法在网页中添加JQuery：

  • 从jquery.com下载JQuery库
  • 从CDN中载入JQuery，如从Google中加载JQuery

JQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用它：

1
2
3
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

将下载的文件放在网页的同一目录下就可以使用JQuery，注意，在HTML5中，不必在<script>标签中使用type="text/javascript"，因为JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。

如果你不希望下载并存放JQuery，那么可以使用CDN（内容分发网络）引用它，例如：

1
2
3
4
<!--菜鸟教程CDN-->
<head>
  	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
1
2
3
4
<!--百度CDN-->
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
1
2
3
4
<!--又拍云CDN-->
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>
1
2
3
4
<!--新浪CDN-->
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
1
2
3
4
<!--谷歌CDN-->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
1
2
3
4
<!--微软CDN-->
<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
</head>

JQuery语法

基本语法

JQuery语法是通过选取HTML元素，并对选取的元素执行某些操作，基础语法如下：

$(selector).action()

  • 美元符号定义JQuery
  • 选择符（selector）查询和查找HTML元素
  • JQuery的action()指定对元素的操作

举例如下：

  • $(this).hide()：隐藏当前元素
  • $("p").hide()：隐藏所有<p>元素
  • $("p.test").hide()：隐藏所有class="test"的<p>元素
  • $("#test").hide()：隐藏所有id="test"的元素

文档就绪事件

1
2
3
$(document).read(function() {
  
});

这是为了防止文档在完全加载（就绪）之前运行JQuery代码，即在DOM加载完成之后才可以对DOM进行操作。

简洁写法如下：

1
2
3
$(function() {
  
});

JQuery选择器

JQuery选择器允许您对HTML元素组或某个元素进行操作，JQuery选择器基于元素的id、类、类型、属性、属性值等查找（或选择）HTML元素，JQuery中所有选择器都以美元符号开头：$()。

元素选择器

JQuery元素选择器基于元素名选取元素，例如在页面上选取所有<p>元素：

1
$("p")

又比如下面这个例子：

1
2
3
4
5
$(function() {
  	$("button").click(function() {
      	$("p").hide();
  	});
});

#id选择器

JQuery #id选择器通过HTML元素的id属性选取指定的元素，页面中元素的id应该是唯一的，其语法如下：

1
$("#test")

又比如下面这个例子：

1
2
3
4
5
$(function() {
  	$("button").click(function() {
      	$("#test").hide();
  	});
});

.class选择器

JQuery 类选择器可以通过指定的class查找元素，语法如下：

1
$(".test")

又比如下面这个例子：

1
2
3
4
5
$(function() {
  	$("button").click(function() {
      	$(".test").hide();
  	});
});

用户点击按钮后所有带有class="test"属性的元素都隐藏。

更多实例

语法 描述
$(“*”) 选取所有元素
$(this) 选取当前HTML元素
$(“p.intro”) 选取class为intro的<p>元素
$(“p:first”) 选取第一个<p>元素
$(“ul li:first”) 选取第一个 <ul>元素的第一个 <li>元素
$(“ul li:first-child”) 选取每个 <ul>元素的第一个 <li>元素
$(“[href]”) 选取带有 href 属性的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的<a>元素
$(“:button”) 选取所有 type=”button” 的<input>元素 和 <button> 元素
$(“tr:even”) 选取偶数位置的<tr>元素
$(“tr:odd”) 选取奇数位置的<tr>元素

独立文件中使用JQuery函数

可以将JQuery函数放到独立的.js文件中，通过src属性来引用文件，使得页面更加的清晰，例如：

1
2
3
4
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

JQuery事件

常见的DOM事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
keydown change resize
keyup focus scroll
blur unload

常用的JQuery事件方法

  • $(document).ready()

    允许我们在文档完全加载完后执行函数

  • click()

    当按钮点击事件触发时调用函数

  • dbclick()

    当双击元素时发生dbclick事件

  • mouseenter()

    当鼠标指针穿过元素时会发生moouseenter事件

  • mouseleave()

    当鼠标指针离开元素时会发生mouseleave事件

  • mousedown()

    当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

  • mouseup()

    当在元素上松开鼠标指针时会发生mouseup事件

  • hover()

    用于模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter），当鼠标移出这个元素时会触发指定的第二个函数（mouseleave）：

    1
    2
    3
    4
    5
    6
    7
    8
    $("#p1").hover(function() {
      	function() {
          	alert("你进入了p1!");
      	},
    	function() {
          	alert("拜拜，现在你离开了p1!");
    	}
    });

  • focus()

    当元素获得焦点时发生focus事件，当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。

  • blur()

    当元素失去焦点，发生blur事件。